<!DOCTYPE html>
<html>
<head>
    <title>My Favourite Tweets</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
    <script src="js/jquery-1.9.0.min.js" type="text/javascript"></script>
    <script src="js/jquery.mobile-1.3.0-rc.1.js" type="text/javascript"></script>
	<script src="js/jquery.sparkline.min.js" type="text/javascript"></script>
	<script src="utils.js" type="text/javascript"></script>
	<script src="js/jquery.infinitescroll.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="css/custom.css">
    <link rel="stylesheet" href="css/jqm-demos.css">
    <link rel="stylesheet" href="css/jquery.mobile-1.3.0-rc.1.css">
	<script src="js/jquery.swipe-events.js"></script>
	<style>	
		.tweet-details {
			max-width:340px;
			background-image:url("http://blog-imgs-54.fc2.com/w/i/n/windy2/image659-1920x1080.jpg");
		}
	</style>
</head>
<body>

<div data-role="page" id='page1'>

    <div data-role="header" data-theme="b">
        <h1>My Favourite Tweets</h1>
		<div class="link"><a href="#readme">README</a></div>
    </div><!-- /header -->
    
    <div data-role="content" class="content" >
		<div>
			<ul class="main-navigation" data-role="listview" data-inset="true" >
					
			</ul>
			
			<div class="user-popup">
			</div>
				
			<div class="tweet-popup">
			</div>
		</div>

	</div>
    
    <div class="jqm-footer">
		<font color="#413839">
		<p>Intended for CSC309H1 Assignment 3<br>Created by Haozhang Li, Hao Liu, Junqiang Wu and Shan Shan Yang</p>
		</font>
    </div><!-- /jqm-footer -->
	
	
    
</div><!-- /page -->   

<div data-role="page" id="readme">
	<div data-role="header" data-theme="b">
		<h1>README</h1>
		<div class="link"><a href="#page1">Back to Homepage</a></div>
	</div>
	
	<div data-role="content">
		<ul>
			<li>
				To view more details about a tweet. Click on a desired tweet section in the main navigation window. A new pop-up tweet window will be displayed. To close the tweet pop-up, click on the "back" button or tap anywhere on the main navigation window.
				With the tweet pop-up window open, swipe left to quickly switch to the previous tweet or swipe right to switch to the next tweet.
			</li><br />
			<li>
				To view more details about an user. Click on a desired user profile image in the main navigation window. A new pop-up user profile window will be displayed. To close the profile pop-up, click on the "back" button or tap anywhere on the main navigation window.
			</li><br />
			<li>
				If there are more than 20 tweets in the given json file, the page will only display the first 20 entries initially. Each time the user scrolls to the bottom of the page, 10 new entries will be displayed. This is the pagination mechanism our group is using.
			</li>
		</ul>
	</div>
	
	<div class="jqm-footer">
		<font color="#413839">
		<p>Intended for CSC309H1 Assignment 3<br>Created by Haozhang Li, Hao Liu, Junqiang Wu and Shan Shan Yang</p>
		</font>
    </div><!-- /jqm-footer -->
</div>

</body>

<script type="text/javascript">

	$(document).load(loadList()).delay(800);
	
	/* Main function load the JSON file and parse the information */
	function loadList(){
		getJSON(function(tweet){
			count = 0;
			listnum = 1
			
			// Loop through all tweets in JSON file
			$.each(tweet, function () {
				tweet = this;
				count += 1;
				
				// For every additional 10 tweets, create a new page with an empty ul element.
				if (count != 1 && count != 11 && count % 10 == 1) {
					var thtml = '';
					thtml += '<div data-role="page" id="page' + Math.ceil((count-10) / 10) + '">';

					thtml += '<div data-role="content"><ul class="temp-navigation" id = "' + (Math.floor((count-10) / 10) + 1) + '" data-role="listview" data-inset="true">';
					thtml += '</ul>';
					thtml += '</div>';

					thtml += '</div>';
					$('body').append(thtml);

				}
				
				// Creates tags for user profile popup.
				var uhtml = '';
				tweet_user_url = tweet.user.url;
				
				// If no user url change it to empty string
				if (tweet_user_url == null){
					tweet_user_url = "";
				}
				
				// Html for user profile popup
				uhtml += '<div data-role="popup" id="user-profile' + count + '" class="ui-content user-profile" style="background-image:url(' + tweet.user.profile_background_image_url + ');">';
				uhtml += '<div class="opacBoard">';
				uhtml += '<div class="usr-layout">';
				uhtml += '<div class="usr-pic"><img src="' + tweet.user.profile_image_url + '"';
				uhtml += ' class="usr-image"/>';
				
				uhtml += '<font size="3" color="black">';
				uhtml += '<p><font size="5"><b>' + tweet.user.name + '</b></font><br>@' + tweet.user.screen_name + '</p>';
				uhtml += '</div>';
				uhtml += '<p>' + tweet.user.description + '</p>';
				uhtml += '<p>' + tweet.user.location + '</p>';
				uhtml += '<a href="' + tweet_user_url + '">' + tweet_user_url + '</a>';
				uhtml += '<p>';
				uhtml += '<div class="ui-grid-b ui-responsive status">';
				uhtml += '<div class="ui-block-a" ><div class="ui-body ui-body-d opacboard"><font color="black">Tweets<br>' + tweet.user.statuses_count + '</font></div></div>';
				uhtml += '<div class="ui-block-b"><div class="ui-body ui-body-d opacboard"><font color="black">Followers<br>' + tweet.user.followers_count + '</font></div></div>';
				uhtml += '<div class="ui-block-c"><div class="ui-body ui-body-d opacboard"><font color="black">Following<br>' + tweet.user.friends_count + '</font></div></div>';
				uhtml += '</div>';
				uhtml += '</p>';
				uhtml += '</font>';
				uhtml += '<div align="right"><a href="client.html" data-role="button" data-rel="back" data-inline="true" data-mini="true" data-icon="home">back</a></div>';
				uhtml += '</div>';
				uhtml += '</div>';
				uhtml += '</div>';
				$('.user-popup').append(uhtml);
				
				// Creates tags for tweet detail popup.
				var phtml = '';
				phtml += '<div data-role="popup" id="tweet-detail' + count + '"   class="ui-content tweet-details" >';
				phtml += '<div class="opacBoard">';
				phtml += '<font size="3" color="black">';
				phtml += '<h3>' + tweet.user.name + '</h3>';

				
				if (typeof tweet.entities == 'undefined') {
					phtml += '<p>' + tweet.text + '</p>';
				} else {
					// Parse information for links and pictures
					var indices = [];
					var imgIndices = [];
					$.each(tweet.entities.urls, function () {
						url = this;
						indices.push(url.indices);
					});
					
					// Check for media inside the tweet
					if (typeof tweet.entities.media == 'undefined') {
					} else {
						$.each(tweet.entities.media, function () {
							media = this;
							indices.push(media.indices);
							imgIndices.push(media.indices);
						});
					}
					
					// Display the links for each tweet in the popup
					indices.sort(function(a,b){return(a[0]-b[0])});
					phtml += '<p>' + tweet.text.slice(0, indices[0][0]);
					for (var i=0; i < indices.length; i++) {
						phtml += '<a href="' + tweet.text.slice(indices[i][0], indices[i][1]) + '">' + tweet.text.slice(indices[i][0], indices[i][1]) + "</a>";
						if (i != indices.length - 1) {
							phtml += tweet.text.slice(indices[i][1], indices[i+1][0]);
						} else {
							phtml += tweet.text.slice(indices[i][1]);
						}
					}
					phtml += '</p>';
					// If a tweet have a image, display it.
					for (var j=0; j < imgIndices.length; j++) {
						phtml += '<img src="' + tweet.entities.media[j].media_url + '" class="tweet-image" />';
					}
				}
				phtml += '</font>';
				phtml += '</div>';	
				time = new Date(tweet.created_at);

				// Display tweet details
				if (tweet.place != null) {
					phtml += '<p><font size="1" color="black">Created in ' + tweet.place.full_name + ", " + tweet.place.country_code + " on " + time;
				} else {
					phtml += '<p><font size="1" color="black">Created at ' + time;
				}
				
				phtml += '<div align="right">Retweeted ' + tweet.retweet_count + ' times<a href="client.html" data-role="button" data-rel="back" data-inline="true" data-mini="true" data-icon="home">back</a></div></font></p>';
				phtml += '</div>';
			
				$('.tweet-popup').append(phtml);

				listnum = listnum * (-1);
				
				// Generating each tweet
				var shtml = '';
				shtml += '<li data-icon=false class="listItems' + listnum + '"> <div class="profileImage">';
				shtml += '<a href="#user-profile' + count + '" data-rel="popup" data-position-to="window" data-transition="pop">';
				shtml += '<img src="' + tweet.user.profile_image_url + '"';
				shtml += ' class="InnerList"/></a></div>';
				shtml += '<a href="#tweet-detail' + count + '" data-rel="popup" data-position-to="window" data-transition="pop">';
				shtml += '<h2>' + tweet.user.name + '</h2>';
				shtml += '<p>' + tweet.text + '</p>';
				shtml += '</a></li>';
				
				if ( count <= 20) {
					// Add first 20 tweets to main-navigation page
					$('.main-navigation').append(shtml);
				} else {
				    // Add remain tweets to temp-navigation page
					$('#' + Math.ceil((count-10) / 10) + '.temp-navigation').append(shtml);
				}
			});
		});
	}
	
	/* Function to get JSON object */
  	function getJSON(callback){
		$.getJSON('favs.json', function (data) {
			// create array
			var tweets = [];
			$.each(data, function () {
				data = this;
				var item = JSON.parse(JSON.stringify(data));
				//append
				tweets.push(item);
			});
			callback(tweets);
		});
	}
	
	/* Function used to add new tweets when user scroll to the bottom */
	$(document).ready(function() {
		var eventsElement = $('.main-navigation');
		var pcount = 1;
		var totalCount = $('.temp-navigation').size();
		$(window).bind('scrollstop', function() {
			var height = $(window).height();
			var scrollHeight = $('#page1')[0].scrollHeight;
			var st = $(window).scrollTop()
			if ((st + height >= scrollHeight) && (pcount <= totalCount)) {
				// Add more tweets when scroll to bottom
				pcount += 1;
				eventsElement.append($('#' + pcount + '.temp-navigation').html());
				eventsElement.listview('refresh');
				// Remove loaded page
				$("#page" + pcount).remove();
			}
		});
	});
	
	/* Set div and list item size in real time */
	$(document).ready(function() {
		$( window ).bind("resize", function(){
			// Change the width of the div
			var show_width = $(window).width() - 35;
			if (show_width > 800){
				// When resizing browser larger than 800px, display double-column
				var half_width = show_width / 2;
				var wide_css_left = {width: half_width, float: 'left'}
				var wide_css_right = {width: half_width, float: 'right'}
				$(".content").css({width: show_width + 5});
				$(".listItems-1").css(wide_css_left);
				$(".listItems1").css(wide_css_right);
			} else {
				// When resizing browser less than 800px
				$(".content").css({width: show_width + 5});
				$(".listItems-1").css({width: '',float:''});
				$(".listItems1").css({width: '',float:''});
			}
		});
	});
	
	/* Set list items size on load */
	$(function() {
		var show_width = $(window).width() - 35;
		if (show_width > 800){
			// On load then browser width is larger than 800 px
			var half_width = show_width / 2;
			var wide_css_left = {width: half_width, float: 'left'}
			var wide_css_right = {width: half_width, float: 'right'}
			$(".content").css({width: show_width + 5});
			$(".listItems-1").css(wide_css_left);
			$(".listItems1").css(wide_css_right);
		} else {
			// On load then browser width is less than 800 px
			$(".content").css({width: show_width + 5});
			$(".listItems-1").css({width: '',float:''});
			$(".listItems1").css({width: '',float:''});
		}
	});
	
	/* Handling event used for swipe left */
	$(document).delegate('.ui-content', 'swipeleft', function(event) {
		if (this.id.indexOf("tweet-detail") != -1) {
			if (parseInt(this.id.slice(12)) - 1 > 0) {
				temp = "#tweet-detail" + (parseInt(this.id.slice(12)) - 1);
				$("#" + this.id).popup('close');
				setTimeout(function(){$(temp).popup('open');}, 500);
			} else {
				$("#" + this.id).popup('close');
			}
		} else {
		}
	});
	
	/* Handling event used for swipe right */
	$(document).delegate('.ui-content', 'swiperight', function(event) {
		if (this.id.indexOf("tweet-detail") != -1) {
			if (parseInt(this.id.slice(12)) + 1 < $('.ui-content').size() / 2) {
				temp = "#tweet-detail" + (parseInt(this.id.slice(12)) + 1);
				$("#" + this.id).popup('close');
				setTimeout(function(){$(temp).popup('open');}, 500);
			} else {
				$("#" + this.id).popup('close');
			}
		} else {
		}
	});
	
</script>

</html>
